<template>
    <!-- 消息弹窗的设计，写在其他页面都不利于维护，且会造成渲染多次的情况，因此写在此处 -->
    <el-dialog title="图片管理" :visible.sync="imageModel" width="80%" top="5vh">
        <el-container style="height:70vh;position: relative; margin: -30px,-20px;">
            <el-header class="d-flex align-items-center border-bottom">
                <!-- 头部 -->
                <div class="d-flex mr-auto">
                    <el-select class="mr-2" placeholder="请选择图片排序方式" style="width: 250px;height: 40px;"
                        v-model="searchForm.order">
                        <el-option label="降序" value="desc"></el-option>
                        <el-option label="升序" value="esc"></el-option>
                    </el-select>
                    <el-input class="mr-2" style="width: 250px; height: 40px;" placeholder="请输入相册名称"
                        v-model="searchForm.keyword"></el-input>
                    <el-button type="success" @click="getImageList">搜索</el-button>
                </div>

            </el-header>

            <!-- el-aside和el-main都可以分别滚动 -->
            <el-container>
                <el-aside width="200px" style="position: absolute; top: 60px; left: 0; bottom: 60px;"
                    class="bg-white border-right" v-loading="asideLoading">
                    <!-- 侧边 | 相册的列表 将要被封装在components\image\album-item.vue中-->
                    <ul class="list-group list-group-flush">
                        <album-item v-for="(item, index) in albums" :key="index" :item="item" :index="index"
                            :active="ablumIndex === index" @change="albumsChange" :show-options="false"></album-item>
                    </ul>
                </el-aside>
                <el-container>
                    <el-main style="position: absolute; top: 60px; left: 200px; bottom: 60px; right: 0;"
                        v-loading="mainLoading">
                        <!-- 主内容 -->
                        <!-- :gutter每个元素之间的间距  -->
                        <el-row :gutter="10">
                            <!-- 大中小屏情况下每一行的个数 -->
                            <el-col :span="24" :lg="4" :md="6" :sm="8" v-for="(item, index) in imageList" :key="index">
                                <!-- :span每一列的宽度占比 24分之一  -->
                                <!-- 设置内边距为0 -->
                                <el-card class="box-card mb-3 position-relative" :body-style="{ padding: '0px' }"
                                    shadow="hover" style="cursor: pointer;">
                                    <!-- 批量选中后出现的边框和数字角标 -->
                                    <div class="border" :class="{ 'border-danger': item.isCheck }">
                                        <span class="badge badge-danger" style="position: absolute; right: 0;top: 0;"
                                            v-if="item.isCheck">{{ item.checkOrder }} </span>

                                        <img :src="item.url" :alt="item.name" :title="item.name" class="w-100"
                                            style="height: 100px" @click="choose(item)">
                                        <div class="w-100 text-white position-absolute"
                                            style="background:rgba(0,0,0,0.5); margin-top: -25px;text-align: center;">
                                            {{ item.name }}
                                        </div>
                                        <el-button-group style="display: flex; justify-content: center;">
                                            <el-button icon="el-icon-edit" size="mini" class="p-2"
                                                @click="editImage(item, index)"></el-button>
                                            <el-button icon="el-icon-delete" size="mini" class="p-2"
                                                @click="delImage({ index: index })"></el-button>
                                        </el-button-group>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-main>
                </el-container>
            </el-container>

            <!-- 底部 -->
            <el-footer class="border-top d-flex align-items-center px-0">
                <!-- flex-shrink: 0;保证不被右边的挤压 -->
                <div style="width: 200px; flex-shrink: 0;"
                    class="h-100 d-flex align-items-center justify-content-center border-right">
                    <el-button-group>
                        <el-button size="mini" :disabled="albumPage === 1"
                            @click="changeAlbumPage('pre')">上一页</el-button>
                        <el-button size="mini" @click="changeAlbumPage('next')"
                            :disabled="albumPage === Math.ceil(albumTotal / 10)">下一页</el-button>
                    </el-button-group>
                </div>
                <!-- flex:1占剩余的所有空间 -->
                <div style="flex: 1;">
                    <el-pagination @size-change="handleSizeChange" @current-schange="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>

            </el-footer>
        </el-container>
        <span slot="footer" class="dialog-footer">
            <el-button @click="imageModel = false">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import albumItem from '@/components/image/album-item.vue'
export default {
    components: {
        albumItem,
    },
    props: {
        //  选中数量限制
        max: {
            type: Number,
            default: 9,
        }
    },
    data() {
        return {
            imageModel: false,
            callback: false,
            // 搜索数据
            searchForm: {
                order: '',
                keyword: '',
            },
            ablumIndex: 0, //当前选中的相册
            albums: [], // 相册列表
            imageList: [], // 图片列表
            chooseList: [], // 选中的图片列表,选中得到都会存在这里
            currentPage: 1, // 当前页码

            // 后端接口的分页
            albumPage: 1, // 默认当前页码
            albumTotal: 0, //后端数据库中的相册总条数

            pageSize: 10,
            pageSizes: [10, 20, 50, 100],
            total: 10,

            mainLoading: false, // 主内容加载状态
            asideLoading: false, // 侧边栏加载状态
        }
    },
    // created() {
    //     // 组件创建时执行的代码
    //     this._initialize();
    // },
    computed: {
        // 选中相册的id
        image_class_id() {
            let item = this.albums[this.albumIndex];
            if (item) {
                return item.id
            }
            return 0
        },
        // 当前选中相册图片列表url
        getImageListUrl() {
            let other = ''
            if (this.searchForm.keyword) {
                other = `&keyword=${this.searchForm.keyword}`
            }
            return `/admin/imageclass/${this.image_class_id}/image/${this.currentPage}?limit=${this.pageSize}&order=${this.searchForm.order}${other}`
        }
    },
    methods: {
        chooseImage(callback) {

            this._initialize(); // 初始化相册列表

            // 是一个回调函数，接收sku-card-children扥res并传值给他，在子组件sku-card-children也能拿到123
            // callback('123')
            this.callback = callback
            this.imageModel = true
            // 取消选中
            this.unChoose();
        },
        confirm() {
            // 接收选中的图片，在点击之后才会触发
            if (typeof this.callback === 'function') {
                this.callback(this.chooseList)
            }
            // 关闭弹窗
            this.hide()
        },

        // 关闭弹出层
        hide() {
            this.imageModel = false;
            this.callback = false;
        },

        // 方法
        _initialize() {
            // 
            // 获取相册列表

            // const token = sessionStorage.getItem('token')
            // console.log('当前token：', token)


            // 修改为获取相册列表的 API
            this.asideLoading = true; // 显示侧边栏加载状态
            this.$axios.get(`/admin/imageclass/${this.albumPage}`, {
                params: {
                    limit: 10,
                    order: 'desc'
                },
                token: true,  // 使用 token 配置项
                loading: true, // 显示 loading
            }).then(res => {
                // console.log('相册列表响应：', res);
                this.albumModel = false; // 关闭相册模态框

                // 处理响应数据
                let result = res.data.data;
                this.albums = result.list;
                this.albumTotal = result.totalCount;
                // 获取选中相册下的第一页图片列表
                this.getImageList()
                this.asideLoading = false // 隐藏侧边栏加载状态
            }).catch(() => {
                // console.error('获取相册列表失败：', err);
                // console.error('请求配置：', err.config);
                // console.error('响应数据：', err.response?.data);
                this.asideLoading = false // 隐藏侧边栏加载状态

            })
        },

        // 获取对应相册下的相册列表
        getImageList() {

            this.mainLoading = true; // 显示主内容加载状态
            // 使用当前选中相册的 ID
            const currentAlbumId = this.albums[this.albumIndex]?.id || 1425
            const url = `/admin/imageclass/${currentAlbumId}/image/${this.currentPage}`

            this.$axios.get(url, {
                params: {
                    limit: this.pageSize,
                    order: this.searchForm.order,
                    keyword: this.searchForm.keyword
                },
                token: true
            }).then(res => {
                let result = res.data.data
                this.imageList = result.list.map(item => {
                    return {
                        id: item.id,
                        url: item.url,
                        name: item.name,
                        isCheck: false, // 默认是否选中
                        checkOrder: 0,    // 选中的序号
                    }
                })
                this.total = result.totalCount
                this.mainLoading = false // 隐藏侧边栏加载状态
            }).catch(err => {
                console.error('获取图片列表失败：', err);
                this.mainLoading = false // 隐藏侧边栏加载状态
            })
        },
        // 相册列表的点击事件,切换相册   
        albumsChange(index) {
            this.ablumIndex = index;

            this.getImageList(); // 切换相册时重新获取获取当前相册下的图片列表
        },

        // 修改图片名称
        editImage(item) {
            this.$prompt('请输入新的名称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValue: item.name,
                inputValidator(val) {
                    if (val === '') {
                        return '图片名称不能为空'
                    }
                }
            }).then(({ value }) => {
                item.name = value; // 修改图片名称
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                })
            })
        },

        // 删除图片
        delImage(obj) {
            this.$confirm(obj.all ? '是否确定删除该选中所有的图片' : '是否删除图片', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if (obj.all) {
                    let list = this.imageList.filter(img => {
                        // 希望找不到的图片
                        // 1.在imageList中找不到的图片，返回true
                        return !this.chooseList.some(c => {
                            // 判断当前的图片是否在选中的图片中
                            // 如果在选中的图片中，返回true
                            return c.id === img.id
                        })
                    });
                    // 打印未被选中的图片
                    // console.log(list); 
                    this.imageList = list; // 重新赋值imageList
                    this.chooseList = []; // 清空选中的图片
                } else {
                    this.imageList.splice(obj.index, 1); // 删除图片
                }
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            })
        },

        // 选中图片的样式
        choose(item) {
            // 之前未选中
            if (!item.isCheck) {
                // 限制选中数量
                if (this.chooseList.length >= this.max) {
                    return this.$message({
                        message: '最多选择' + this.max + '张图片',
                        type: 'warning',
                    })
                }
                this.chooseList.push({ id: item.id, url: item.url }); // 选中图片存入数组chooseList中
                // 计算序号
                item.checkOrder = this.chooseList.length; // 选中的序号
                // 修改状态
                item.isCheck = true; // 选中状态
                return;
            }
            // 取消选中图片，1.找到在chooseList中的索引，删除
            let i = this.chooseList.findIndex(v => v.id === item.id); // 找到在chooseList中的索引
            if (i === -1) return; // 如果没有找到，直接返回
            // 重新计算序号
            let length = this.chooseList.length; // 选中的图片的数量
            if (i + 1 < length) { // 如果不是最后一个，取消选中中间的序号
                // 重新计算imageList中选中的序号
                for (let j = i; j < length; j++) {
                    let no = this.imageList.findIndex(v => v.id === this.chooseList[j].id); // 找到在imageList中的索引
                    if (no > -1) {
                        this.imageList[no].checkOrder = this.imageList[no].checkOrder - 1; // 重新计算选中的序号
                    }
                }
            }
            this.chooseList.splice(i, 1); // 删除选中的图片的序号
            // 修改状态
            item.isCheck = false;
            // 重置序号
            item.checkOrder = 0;
        },

        // 取消批量选中的图片
        unChoose() {
            this.imageList.forEach(img => {
                // 找到所有选中的图片
                let i = this.chooseList.findIndex(item => {
                    return item.id === img.id
                })
                if (i > -1) {
                    // 大于-1.拿到了这些图片，取消选中的样式
                    // 排序归零
                    img.isCheck = false; // 取消选中状态样式
                    img.checkOrder = '0'; // 取消选中序号
                    this.chooseList.splice(i, 1); // 从chooseList中移除
                }
            });
        },
        // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // 相册的分页功能实现
        changeAlbumPage(type) {
            if (type === 'pre') {
                this.albumPage--
            } else {
                this.albumPage++
            }
            this._initialize(); // 初始化相册列表

        },
    }
}
</script>